<template>
    <div class="common-layout">
        <el-container>
            <el-header class="custom-header" style="display:flex;align-items: center;justify-content: space-between;">
                <div>
                    <div>
                        <img src="../imges/f.png" alt="" style="  width: 22px; height: 17px;vertical-align: -2px;">
                        <span style="margin-left: 10px;">首页 </span>
                    </div>
                </div>
                <div style="display:flex;">
                    <div>
                        <el-upload class="avatar-uploader" action="../imges/12.jpg" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>

                    </div>
                    <div>
                        <el-dropdown style="line-height: 50px;margin-left: 10px;outline: none;border: none;">
                            <span class="el-dropdown-link">
                                用户昵称
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>修改密码</el-dropdown-item>
                                    <el-dropdown-item @click="out">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-container class="content">
                <el-aside style="width: 200px;height: 100%;">
                    <el-menu :router="true" default-active="2" class="el-menu-vertical-demo"
                        style="min-height: 100%;box-sizing: border-box;">
                        <el-sub-menu index="1">
                            <template #title>
                                <span>会员管理</span>
                            </template>

                            <el-menu-item index="/home/huiyuanliebiao" @click="title = ' / 会员列表'">会员列表</el-menu-item>
                            <el-menu-item index="/home/chongzhishezhi" @click="title = ' / 充值设置'">充值设置</el-menu-item>
                            <el-menu-item index="/home/JiFenSheZhi" @click="title = ' / 积分设置'">积分设置</el-menu-item>
                            <el-menu-item index="/home/chongzhijilu" @click="title = ' / 充值记录'">充值记录</el-menu-item>
                            <el-menu-item index="/home/xiaofeijilu" @click="title = ' / 消费记录'">消费记录</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <span>优惠券</span>
                            </template>

                            <el-menu-item index="/home/youhuiquan" @click="title = ' / 优惠券管理'">优惠券管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <span>商品管理</span>
                            </template>

                            <el-menu-item index="/home/shangpinliebiao" @click="title = ' / 商品列表'">商品列表</el-menu-item>
                            <el-menu-item index="/home/shangpinfenlei" @click="title = ' / 商品分类'">商品分类</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                <span>订单管理</span>
                            </template>

                            <el-menu-item index="/home/shangpindingdan" @click="title = ' / 商品订单'">商品订单</el-menu-item>
                            <el-menu-item index="/home/kefangdingdan" @click="title = ' / 客房订单'">客房订单</el-menu-item>
                            <el-menu-item index="/home/zhusujilu" @click="title = ' / 住宿记录'">住宿记录</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>
                                <span>客房管理</span>
                            </template>

                            <el-menu-item index="/home/fangtaiguanli" @click="title = ' / 房态管理'">房态管理</el-menu-item>
                            <el-menu-item index="/home/fangxingguanli" @click="title = ' / 房型管理'">房型管理</el-menu-item>
                            <el-menu-item index="/home/fanghaoguanli" @click="title = ' / 房号管理'">房号管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="6">
                            <template #title>
                                <span>投诉建议管理</span>
                            </template>

                            <el-menu-item index="/home/tousujianyi">投诉建议</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="7">
                            <template #title>
                                <span>用户管理</span>
                            </template>

                            <el-menu-item index="/home/guanliyuanliebiao" @click="title = ' / 管理员列表'">管理员列表</el-menu-item>
                            <el-menu-item index="/home/jiaoseguanli" @click="title = ' / 角色管理'">角色管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="8">
                            <template #title>
                                <span>设置</span>
                            </template>

                            <el-menu-item index="/home/weixinshezhi" @click="title = ' / 微信设置'">微信设置</el-menu-item>
                            <el-menu-item index="/home/jiudianshezhi" @click="title = ' / 酒店设置'">酒店设置</el-menu-item>
                            <el-menu-item index="/home/qitashezhi" @click="title = ' / 其他设置'">其他设置</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="9">
                            <template #title>
                                <span>项目拓展</span>
                            </template>

                            <el-menu-item index="/home/tuozhan1" @click="title = ' / 拓展一'">拓展一</el-menu-item>
                            <el-menu-item index="/home/tuozhan2" @click="title = ' / 拓展二'">拓展二</el-menu-item>
                            <el-menu-item index="/home/tuozhan3" @click="title = ' / 拓展三'">拓展三</el-menu-item>
                            <el-menu-item index="/home/tuozhan4" @click="title = ' / 拓展四'">拓展四</el-menu-item>
                            <el-menu-item index="/home/tuozhan5" @click="title = ' / 拓展五'">拓展五</el-menu-item>
                            <el-menu-item index="/home/tuozhan6" @click="title = ' / 拓展六'">拓展六</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <div style="height: 100%;">
                        <div class="box">
                            <span>首页</span>
                            <span> {{ title }}</span>
                        </div>
                        <div class="bor">
                            <RouterView></RouterView>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">

import router from '@/router';

import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'







const title: any = ref('')
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

//上传图片
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

const out = () => {
    router.push('/login')
}
</script>

<style scoped lang="less">
.common-layout,
.el-container {
    height: 100%;
}

/* 设置滚动条的宽度 */
::-webkit-scrollbar {
    width: 0px;
    /* 设置滚动条的宽度 */
}

.content {
    flex: 1;
    overflow: hidden;
}

.el-main {
    height: 100%;
    padding: 0px;
}

.el-header {
    background-color: #f2f2f2;
    height: 50px;
    line-height: 50px;
    color: #333;
}

.custom-tupian {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    border-radius: 30px;
    margin-top: 15px;
}

:focus-visible {
    outline: none;
}

.el-menu-item::before {
    content: "";
    display: inline-block;
    background-image: url('../imges/c.png');
    /* 替换成你自己的图标路径 */
    width: 20px;
    /* 设置图标的宽度 */
    height: 14px;
    /* 设置图标的高度 */
    margin-right: 5px;
    /* 如果需要间距，可以调整这个值 */
    background-size: cover;
    vertical-align: -2px;
}

.el-menu-item:hover::before {
    /* 在:hover 伪类选择器下设置样式 */
    background-color: #ee903c;
    /* 设置背景颜色，这里使用红色 (#ff0000) 作为示例 */
}

.el-menu-item:hover {
    color: #ee903c;
}

.img1 {
    width: 28px;
    height: 28px;
    background-size: cover;
    border-radius: 50%;
    vertical-align: middle;
}

.el-menu-item {
    margin-top: 15px;
}

.box {
    height: 6%;
    line-height: 50px;
    background-color: white;
    border-bottom: 1px solid #c8c7c7;
    padding-left: 20px;
}

.box :nth-child(2) {
    color: #b6aeae;
}

.bor {
    height: 93%;
    box-sizing: border-box;
}
</style>